
import "./App.css";
function App() {
  window.addEventListener('message', (event) => {
    console.log('main-to-sub 子组件的消息', event.data);
  });
  return (
    <>
      <div className="app">
        <h1>主应用（Main App）</h1>
        <nav>
          <a href="/" style={{ marginRight: "10px" }}>
            首页
          </a>
          <a href="/sub-app">子应用</a>
        </nav>
        <button
          onClick={() => {
            // 通过 qiankun 框架向子应用主动发送数据
            window.dispatchEvent(
              new CustomEvent('main-to-sub', {
                detail: {
                  message: '来自主应用的数据',
                  time: new Date().toLocaleString(),
                },
              })
            );
          }}
          style={{ marginTop: 20 }}
        >
          向子应用传数据
        </button>
        <div
          id="sub-app-container"
          style={{ marginTop: 20, padding: 20, border: "1px solid #ccc" }}
        >
          {/* 子应用将挂载到这里 */}
        </div>
      </div>
    </>
  );
}

export default App;
